<template>
  <el-dialog
    :width="dialogWidth"
    class="goods_dialog"
    title="选择商品"
    :visible.sync="dialogVisible"
    :append-to-body="appendToBody"
    :close-on-click-modal="false"
  >
    <div class="flex main_wrapper">
      <div class="flex-1">
        <el-form
          :inline="true"
          :model="searchForm"
          class="demo-form-inline"
          @submit.native.prevent
        >
          <el-form-item label="商品ID或名称">
            <el-input
              v-model="searchForm.title"
              placeholder="请输入商品ID或名称"
              @keyup.enter.native="search"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item
            v-if="showTypeSelect"
            label="产品类别"
          >
            <el-select
              clearable
              v-model="searchForm.cate_id"
              placeholder="请选择产品类别"
            >
              <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              @click="search"
            >查询</el-button>
            <el-button
              size="small"
              @click="clearSearch"
            >重置</el-button>
            <slot name="btns"></slot>
          </el-form-item>
        </el-form>
        <div class="flex flex-wrap goods_list">
          <template v-for="item in goodsList">
            <div
              :key="item.id"
              class="flex goods_item"
              :class="{'active':isSelect(item.id)}"
              @click="handleSelect(item)"
            >
              <svg-icon
                v-if="isSelect(item.id)"
                icon-class="check"
                :size="10"
                class="check_icon"
              />
              <el-image
                :src="$globalObj.imgBaseUrl+item.imgurl"
                fit="fill"
              ></el-image>
              <div class="line-block">
                <p class="goods_title">{{item.title}}</p>
                <p class="goods_id">ID: {{item.id}}</p>
                <p
                  v-show="showCate"
                  class="goods_id"
                >分类: {{item.cate_name}}</p>
              </div>
            </div>
          </template>
        </div>
        <div class="text-right">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="searchForm.page"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total"
            prev-text="上一页"
            next-text="下一页"
            background
          >
          </el-pagination>
        </div>
      </div>
      <div class="checked_wrap">
        <p style="margin-bottom:30px">已选商品（{{selectItems.length}}<span v-if="maxNum">/{{maxNum}}</span>）</p>
        <template v-for="(sItem, index) in selectItems">
          <goods-link
            :key="sItem.id"
            ref="goodsLink"
            :show-cate="showCate"
            :goods-data="sItem"
            :show-sort="multiple"
            :show-tool="showCheckedTool"
            @handleDelete="deleteGoods(index)"
            @upSort="upSort(index)"
            @downSort="downSort(index)"
          ></goods-link>
        </template>
      </div>
    </div>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        size="small"
        @click="dialogVisible = false"
      >取 消</el-button>
      <el-button
        size="small"
        type="primary"
        @click="submit"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getGoods, getCategoryList } from "@/api/shop";
import goodsLink from "./goodsLink";
export default {
  components: { goodsLink },
  props: {
    multiple: {
      type: Boolean,
      default: false
    },
    appendToBody: {
      type: Boolean,
      default: false
    },
    dialogWidth: {
      type: String,
      default: "1020px"
    },
    maxNum: {
      type: Number
    },
    showTypeSelect: {
      type: Boolean,
      default: false
    },
    pageSize: {
      type: Number,
      default: 8
    },
    showCheckedTool: {
      type: Boolean,
      default: false
    },
    showCate: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      searchForm: {
        title: "",
        cate_id: null,
        page: 1,
      },
      selectItems: [],
      goodsList: [],
      total: 0,
      categoryList: []
    }
  },
  methods: {
    // 升序
    upSort(index) {
      if (index === 0) {
        return;
      }
      let item = this.selectItems[index];
      this.$set(this.selectItems, index, this.selectItems[index - 1]);
      this.$set(this.selectItems, index - 1, item);
    },
    // 降序
    downSort(index) {
      if (index === this.selectItems.length - 1) {
        return;
      }
      let item = this.selectItems[index];
      this.$set(this.selectItems, index, this.selectItems[index + 1]);
      this.$set(this.selectItems, index + 1, item);
    },
    // 删除商品
    deleteGoods(index) {
      this.selectItems.splice(index, 1);
    },
    // 获取商品列表
    getList() {
      getGoods({ pageSize: this.pageSize, ...this.searchForm }).then(res => {
        console.log('getList',res.data)
        this.goodsList = res.data;
        this.total = res.total;
      })
    },
    submit() {
      this.$emit("setSelect", this.selectItems);
      this.dialogVisible = false;
    },
    // 点击选中
    handleSelect(select) {
      console.log('select',select)
      const index = this.selectItems.findIndex(item => item.id == select.id);
      if (index > -1) {
        // 已经选中取消选中
        this.selectItems.splice(index, 1);
      } else {
        // 选中
        if (this.multiple) {
          // 多选
          if (this.maxNum && this.selectItems.length >= this.maxNum) {
            this.$message({
              message: "数量已达到可选上限",
              type: "warning"
            });
          } else {
            this.selectItems.push(select);
          }
        } else {
          // 单选
          this.selectItems = [select];
        }
      }
    },
    // 判断是否选中
    isSelect(id) {
      return this.selectItems.findIndex(item => item.id == id) > -1;
    },
    // 页码切换
    handleCurrentChange(val) {
      this.searchForm.page = val;
      this.getList();
    },
    // 搜索商品
    search() {
      if (this.searchForm.title || this.searchForm.cate_id) {
        this.searchForm.page = 1;
        this.getList();
      }
    },
    // 重置
    clearSearch() {
      this.searchForm.title = '';
      this.searchForm.cate_id = '';
      this.searchForm.page = 1;
      this.getList();
    },
    // 清空数据
    reset() {
      this.searchForm = {
        title: "",
        cate_id: null,
        page: 1,
      };
      this.selectItems = [];
    },
    // 获取二级分类列表
    getSelectList() {
      getCategoryList().then(res => {
        this.categoryList = res;
      })
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.getList();
        if (this.showTypeSelect) {
          // this.getSelectList();
        }
      } else {
        // 重置
        this.reset();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.goods_item {
  position: relative;
  width: 310px;
  height: 110px;
  padding: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
  border: 1px solid #eeeeee;
  &.active {
    border: 1px solid $mainBlue;
  }
  .check_icon {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
  }
  .el-image {
    margin-right: 10px;
    width: 90px;
    height: 90px;
  }
  .goods_title {
    color: #666666;
    // margin: 12px 0;
  }
  .goods_id {
    color: #999999;
    margin-top: 10px;
  }
}
.checked_wrap {
  width: 350px;
  padding: 10px;
  max-height: 560px;
  overflow: auto;
  border-left: 1px solid #eeeeee;
}
</style>
